<!-- 新增分区 -->
<template>
  <div>
    <el-dialog title="拆铺" :visible.sync="dialogShow" width="65%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <el-descriptions :column="2" class="border-bottom-F2F2F2 margin-bottom-10 padding-left-right-10">
        <el-descriptions-item label="空间类型">{{ setSpaceTypeName(formModel.spaceType) }}</el-descriptions-item>
        <el-descriptions-item label="商铺编码">{{ formModel.shopCode }}</el-descriptions-item>
        <el-descriptions-item label="商铺门牌号">{{ formModel.shopNumber }}</el-descriptions-item>
        <el-descriptions-item label="CAD面积">{{ formModel.cadArea }}</el-descriptions-item>
        <el-descriptions-item label="建筑面积">{{ formModel.buildingArea }}</el-descriptions-item>
        <el-descriptions-item label="分摊建筑面积">{{ formModel.shareArea }}</el-descriptions-item>
        <el-descriptions-item label="规划用途">{{ setSpaceTypeName(formModel.spaceType) }}</el-descriptions-item>
        <el-descriptions-item label="生效时间">{{ formModel.effectiveDate | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="失效时间">{{ formModel.expirationDate | formatDateTime('YYYY-MM-DD') }}</el-descriptions-item>
        <el-descriptions-item label="商铺标签">{{ formModel.shopTag }}</el-descriptions-item>
      </el-descriptions>

      <div v-for="(shopItem, shopIndex) in addList" :key="shopIndex" class="border-bottom-F2F2F2 margin-bottom-10">
        <el-form :ref="`shopform${shopIndex}`" :model="shopItem" label-width="130px">
          <el-row class="row">
            <el-col :span="12">
              <el-form-item label="商铺编码" >
                <el-input maxlength="200" readonly v-model="shopItem.shopCode" placeholder="保存后自动生成" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商铺门牌号" prop="shopNumber" :rules="[{ required: true, message: '请输入商铺门牌号', trigger: 'blur' }]">
                <el-input maxlength="200" v-model="shopItem.shopNumber" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="CAD面积" prop="cadArea" :rules="[{ required: true, message: '请输入CAD面积', trigger: 'blur' }]">
                <el-input v-model="shopItem.cadArea" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="建筑面积" prop="buildingArea" :rules="[{ required: true, message: '请输入建筑面积', trigger: 'blur' }]">
                <el-input v-model="shopItem.buildingArea" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分摊建筑面积" prop="shareArea" :rules="[{ required: true, message: '请输入分摊建筑面积', trigger: 'blur' }]">
                <el-input v-model="shopItem.shareArea" type="number"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规划用途" prop="planUse" :rules="[{ required: true, message: '请选择规划用途', trigger: 'blur' }]">
                <el-select v-model="shopItem.planUse" clearable placeholder="请选择">
                  <el-option v-for="item in spaceTypeList" :key="item.key" :label="item.name" :value="item.key" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="生效时间" prop="effectiveDate" :rules="[{ required: true, message: '请选择生效时间', trigger: 'blur' }]">
                <el-date-picker v-model="shopItem.effectiveDate" type="date" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失效时间" prop="expirationDate" :rules="[{ required: true, message: '请选择失效时间', trigger: 'blur' }]">
                <el-date-picker v-model="shopItem.expirationDate" type="date" value-format="timestamp" clearable placeholder="请选择"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="商铺标签" prop="shopTag" :rules="[{ required: true, message: '请输入商铺标签', trigger: 'blur' }]">
                <el-input maxlength="200" v-model="shopItem.shopTag" placeholder="请输入" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-button size="mini" plain type="danger" class="f-right" @click="deleteFn(shopIndex)">删 除</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="hideDialog">取 消</el-button>
        <el-button size="small" type="primary" @click="addShop">添加商铺</el-button>
        <el-button size="small" type="primary" @click="confirmDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { apiShopExcrete } from '../../../../api/building';
  import { requestTips, askDialog } from '../../../../assets/util';
  import { formValid } from '@/lib/utils';

  export default {
    props: {
      formModel: {
        type: Object,
        default: () => {
          return {};
        },
      },
      dialogShow: {
        type: Boolean,
        default: false,
      },
      workId: {
        type: String,
        default: '',
      },
      spaceKey: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        addList: [],
        spaceTypeList: [
          { key: '1', name: '商铺' },
          { key: '2', name: '活动空间' },
          { key: '3', name: '写字楼' },
          { key: '4', name: '其他' },
          { key: '5', name: '楼道' },
          { key: '6', name: '消防通道' },
          { key: '7', name: '会议室' },
          { key: '8', name: '仓库' },
          { key: '9', name: '办公室' },
        ],
        version: '',
      };
    },

    mounted() {},

    methods: {
      //保存校验
      confirmDialog() {
        console.log(this.$refs);
        if (this.addList.length > 0) {
          let validArr = [];
          for (var i in this.$refs) {
            if (this.$refs[i].length > 0) {
              this.$refs[i][0].validate(valid => {
                if (!valid) {
                  validArr.push(false);
                }
              });
            }
          }
          if (validArr.length == 0) {
            this.saveFn();
          }
        } else {
          this.$message.warning('请添加商铺');
        }
      },
      //保存
      async saveFn() {
        this.initPosition();
        let res = await apiShopExcrete({
          shopKey: this.formModel.primaryKey,
          version: this.version,
          list: this.addList,
          spaceKey: this.spaceKey,
        });
        if (res.success) {
          this.$message({ message: res.message, dangerouslyUseHTMLString: true, type: 'success', customClass: 'tier-high' });
          this.$emit('getList', this.formModel.floorKey);
        } else {
          this.$message({ message: res.message, dangerouslyUseHTMLString: true, type: 'error', customClass: 'tier-high' });
        }
        // requestTips(res, () => {
        //   this.$emit('getList', this.formModel.floorKey);
        // });
      },
      //删除
      deleteFn(index) {
        this.addList.splice(index, 1);
      },
      //新增
      addShop() {
        this.addList.push({});
      },
      //设置点位的初始位置
      initPosition() {
        this.addList.forEach((item, index) => {
          item.workId = this.workId;
          item.spaceKey = this.spaceKey;
          item.floorKey = this.formModel.floorKey;
          item.spaceType = '1';
        });
      },
      hideDialog() {
        this.addList = [];
        this.$emit('hideDialog');
      },
      //取空间类型名字
      setSpaceTypeName(key) {
        let name = '';
        this.spaceTypeList.forEach(item => {
          if (key == item.key) {
            name = item.name;
          }
        });
        return name;
      },
    },

    components: {},
  };
</script>
<style lang="scss" scoped></style>
